<template>
  <label class="aa-checkbox" :class="{'is-checked':ischecked}">
      <span class="aa-checkbox-input">
          <span class="aa-checkbox-inner"></span>
          <input type="checkbox"
          class="aa-checkbox-original"
          :name="name"
          v-model="model"
          :value="label"
        >
      </span>
      <span class="aa-checkbox-label">
          <slot></slot>
          <template v-if="!$slots.default">{{label}}</template>
      </span>
  </label>
</template>

<script>

export default {
  name: 'AaCheckbox',
  props: {
    label: {
      type: String,
      default: ''
    },
    value: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      default: ''
    }
  },
  computed: {
    model: {
      get () {
        return this.isGroup ? this.CheckboxGroup.value : this.value
      },
      set (value) {
        this.isGroup ? this.CheckboxGroup.$emit('input', value) : this.$emit('input', value)
      }
    },
    isGroup () {
      return !!this.CheckboxGroup
    },
    // 判断选中状态
    ischecked () {
      // 有group的,判断label 在数组中有没有
      return this.isGroup ? this.model.includes(this.label) : this.model
    }
  },
  inject: {
    CheckboxGroup: {
      default: ''
    }
  }
}
</script>

<style lang="scss">
.aa-checkbox{
    color: #606266;
    font-weight: 500;
    font-size: 14px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: normal;
    user-select: none;
    margin-right:30px;
    .aa-checkbox-input{
       white-space: nowrap;
       cursor: pointer;
       outline: none;
       display: inline-block;
       line-height: 1;
       position: relative;
       vertical-align: middle;
       .aa-checkbox-inner{
            display: inline-block;
            position: relative;
            border: 1px solid #dce1ec;
            border-radius:2px;
            box-sizing: border-box;
            width: 14px;
            height: 14px;
            background-color:#fff;
            z-index: 1;
            transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
            //选中的小对沟
            &::after{
                box-sizing: content-box;
                content:'';
                border: 1px solid #fff;
                border-left: 0;
                border-top:0;
                height: 7px;
                left: 4px;
                position: absolute;
                top: 1px;
                transform: rotate(45deg) scaleY(0);
                width: 3px;
                transition:transform .15s ease-in .05s;
                transform-origin: center;

            }
       }
       .aa-checkbox-original{
           opacity: 0;
           outline: none;
           position:absolute;
           left: 10px;
           margin: 0;
           width: 0;
           height: 0;
           z-index: -1;
       }
    }
    .aa-checkbox-label{
        display:inline-block;
        padding-left:10px;
        line-height:19px;
        font-size: 14px;
    }
}
.aa-checkbox.is-checked{
    .aa-checkbox-input{
        .aa-checkbox-inner{
            background-color: #409eff;
            border-color:#409eff;
            &::after{
            transform: rotate(45deg) scale(1);
        }
        }

    }
  .aa-checkbox-label{
      color:#409eff;
  }
}

</style>
